<template>
  <div class="h-full">
    <div class="category-container" ref="categoryRef">
      <div v-for="(item, index) in categoryData" :key="index">
        <el-row class="col-tip mt-5">
          <el-col :span="24" class="col-name">
            <el-tag>{{ item.name }}</el-tag>
          </el-col>
        </el-row>
        <el-row class="category-box mt-5">
          <el-col :span="8" class="box-image" v-for="(img, index) in item.category" :key="index">
            <el-image :src="img.preview" :alt="img.tags" @click="createImage(img)" ></el-image>
            <span class="box-image-name">{{img.tags}}</span>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- <div class="category-container" ref="totalRef" @scroll="onTotalScroll" v-else>
      <el-row class="col-tip mt-5">
        <el-col :span="7" class="col-name">
          <el-button text @click="hideTotal()"><IconLeft />{{ categoryData.name }}</el-button>
        </el-col>
      </el-row>
      <el-row class="total-box mt-5" v-loading="categoryData.total.length === 0">
        <el-col :span="8" class="box-image" v-for="(img, index) in categoryData.total" :key="index">
          <el-tooltip placement="top" :content="img.tags" :hide-after="0">
          <img :src="img.preview" :alt="img.tags" @click="createImage(img)" lazy loading="lazy" :ref="(e) => setItemStyle(e, index)" />
          </el-tooltip>
        </el-col>
      </el-row>
    </div> -->
    <!-- <el-row class="image-bottom">{{ $t("message.endOfContent") }}</el-row> -->
  </div>
</template>

<script setup>
import { vue, axios} from '@core';
const { onMounted, ref, computed, defineProps,defineEmits} = vue;
import { ElImage } from 'element-plus'
import { useMainStore } from "@views/fabric/store";
import { storeToRefs } from "pinia";
import { util } from "fabric";
import { GifImage } from '@views/fabric/extension/object/GifImage'
import useHandleCreate from "@views/fabric/hooks/useHandleCreate";
import useCanvas from "@views/fabric/Canvas/useCanvas";
import useCenter from "@views/fabric/Canvas/useCenter";
const mainStore = useMainStore();
const { illustrationJxCategoryData, illustrationCategoryData } = storeToRefs(mainStore);
const { createImageElement } = useHandleCreate();

const props = defineProps({
  type: {
    type: String,
    default: 'data'
  }
});

let categoryData = ref([]);

const getImageCategoryData =()=>{
  if(props.type == 'data'){
    illustrationCategoryData.value.forEach(item => {
      let data = require(`@views/fabric/api/image/${item.type}.json`);
      item.category = data.data;
    });
    categoryData.value = illustrationCategoryData.value;
   }
  else{
    illustrationJxCategoryData.value.forEach(item => {
      let data = require(`@views/fabric/api/image/${item.type}.json`);
      item.category = data.data;
    });
    categoryData.value = illustrationJxCategoryData.value;
  }
}
const hideLoading = async (item, loading) => {
  const [ canvas ] = useCanvas()
  await util.loadImage(item.largeImageURL)
  loading.set({visible: false})
  canvas.renderAll()
}

const createImage = async (item) => {
  const [ canvas ] = useCanvas()
  const { centerPoint } = useCenter()
  let loading = canvas.loading
  if (!loading) {
    let image_load = require(`/static/images/loading.gif`).default;
    loading = await GifImage.fromURL(image_load)
    loading.set({left: centerPoint.x - loading.width / 2, top: centerPoint.y - loading.height / 2})
    canvas.add(loading);
    canvas.renderAll()
    canvas.loading = loading
  }
  else {
    loading.set({visible: true})
    canvas.bringObjectToFront(loading)
    canvas.renderAll()
  }
  await hideLoading(item, loading)
  createImageElement(item.largeImageURL);
};

onMounted(() => {
  getImageCategoryData();
});
</script>

<style lang="scss" scoped>
.col-tip {
  justify-content: space-between;
  align-items: center;
}
.mt-5 {
  margin-top: 5px;
}
.category-box {
  .box-image {
    display: flex;
    flex-direction: column;
    justify-content:flex-start;
    align-items: center;
    padding: 5px;
    box-sizing:border-box;
    .el-image {
      width: 30px;
      height:30px;
      cursor: pointer;
      &:hover {
        filter: brightness(90%);
      }
    }
    .box-image-name{
      padding:5px 0;
      width:100%;
      font-size:12px;
      text-align:center;
      line-height:1.4;
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
}

.category-container {
  height: auto;
  align-items: center;
  :deep(.el-collapse-item__content){
    padding-bottom:10px;
  }
}
.total-box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 0 2px;
  padding-bottom: 20px;
  align-items: end;
  .box-image {
    padding: 2px;
    img {
      width: 30px;
      height:30px;
      cursor: pointer;
      border: 1px solid $borderColor;
      &:hover {
        filter: brightness(90%);
      }
    }
  }
}
.image-bottom {
  height:30px;
  line-height:30px;
  justify-content:center;
}
</style>